<template>
	<view class="position-model-main">
		<view class="common-tips-box">
			<view class="t1">选择期望职位</view>
			<view class="t2" v-if="identity==1">选择您所期望的职位</view>
		</view>
		<view class="list-box">
			<view :class="{ 'checked': item.rank == 1 }" v-for="(item, index) in detail" :key='index'>
				<view class="list-item  title" :data-index="index" @click="showDtlListFn">
					{{item.name}}
					<text class="pull-right iconfontPT iconxiayibu"></text>
				</view>
			</view>
		</view>
		<view class="showModel" :style="'left:' + ui.interactLeft + 'rpx'" catchtouchmove="preventTouchMove">
			<view class="scroll-view-box">
				<scroll-view class="left-list" :scroll-y="true" scroll-top="1">
					<view class="item-box">
						<view @click="checkTwoLevelFn" :data-index="index" v-for="(item, index) in twoLevel" :class="{'left-item': true, 'checked': item.rank == 1}"
						 :key="index">{{ item.name }}</view>
					</view>
				</scroll-view>
			</view>
			<view class="scroll-view-box">
				<scroll-view class="right-list" :scroll-y="true">
					<view class="item-box">
						<view @click="checkThreeLevelFn" :data-item="item" v-for="(item, index) in threeLevel" class="right-item" :key="index">{{ item.name }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="bg" :animation="ui.animationData2" @click="preventTouchHide" catchtouchmove="preventTouchMove" v-if="ui.showModal == 1"></view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		wxGetPositionConfig,
	} from '../../../apis/recruit/index.js'

	export default {
		data() {
			return {
				detail: [],
				twoLevel: [],
				threeLevel: [],
				animationData: {},
				ui: {
					showModal: 0,
					interactLeft: 750,
					animationData2: {},
					lastIndex: '',
					twoIndex: 0
				}
			}
		},
		onReady() {
			this.animation = uni.createAnimation()
		},
		computed: {
			...mapGetters(["identity"])
		},
		onShow() {
			this.getPositionList()
		},
		methods: {
			getPositionList() {
				let _this = this;
				this.$loading.show()
				wxGetPositionConfig().then(res => {
					_this.detail = res.data
					this.$loading.hide()
				})
			},
			showDtlListFn(e) {

				let _this = this,
					detailData = _this.detail,
					index = e.currentTarget.dataset.index,
					lastIndex = _this.ui.lastIndex;

				if (lastIndex || lastIndex === 0) {
					detailData[lastIndex].rank = 0;
				}

				detailData[index].rank = 1;
				detailData[index].subLevelModelList[0].rank = 1;
				_this.ui.showModal = 1
				_this.ui.lastIndex = index
				_this.ui.twoIndex = 0
				_this.ui.interactLeft = 100
				_this.detail = detailData
				_this.twoLevel = detailData[index].subLevelModelList
				_this.threeLevel = detailData[index].subLevelModelList[0].subLevelModelList

			},

			checkTwoLevelFn(e) {
				let _this = this,
					index = e.currentTarget.dataset.index,
					twolData = _this.detail[this.ui.lastIndex].subLevelModelList;

				twolData[_this.ui.twoIndex].rank = 0;
				twolData[index].rank = 1;
				_this.ui.twoIndex = index
				_this.twoLevel = twolData
				_this.threeLevel = twolData[index].subLevelModelList

			},
			checkThreeLevelFn(e) {

				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //-2为上一级页面  
				prevPage.$vm.detail.position = e.currentTarget.dataset.item.name

				uni.navigateBack({
					delta: 1 // delta: 1返回上一级（A 页面）    delta: 2返回上两级
				})
			},
			preventTouchHide() {
				this.ui.showModal = 0
				this.ui.interactLeft = 750
			}
		}
	}
</script>

<style lang="less">
	.checked {
		color: #E41805;
	}

	.common-tips-box {
		width: 100vw;
		height: 87rpx;
		background: #fff;
		padding: 0 30rpx 60rpx;
		color: #333;
		border-bottom: 1rpx solid #BDBDBD;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 5;
	}

	.list-box {
		padding: 0 30rpx;
		margin-top: 147rpx;
	}

	.list-item {
		padding: 40rpx 0;
		font-size: 28rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.title {
		line-height: 28rpx;
	}

	.iconxiayibu {
		font-size: 24rpx;
	}

	.levelModel-box {
		padding: 15rpx 30rpx;
		font-size: 24rpx;
		background: #f8f8f8;
		margin: 20rpx 20rpx 0 0;
		display: inline-block;
		vertical-align: top;
	}

	.showModel {
		bottom: 0;
		position: fixed;
		height: calc(100vh - 147rpx);
		width: calc(100vw - 100rpx);
		background: #fff;
		z-index: 5;
		border-top: 1rpx solid #BDBDBD;
		transition: 300ms;
	}

	.scroll-view-box {
		width: 320rpx;
		display: inline-block;
		margin-top: 1rpx;
		vertical-align: top;
		overflow: hidden;
	}

	.left-list {
		width: 340rpx;
		height: calc(100vh - 147rpx);
		background: rgba(231, 231, 231, 0.3);
		display: inline-block;
		vertical-align: top;
	}

	.right-list {
		width: 340rpx;
		height: calc(100vh - 147rpx);
		background: #fff;
		display: inline-block;
		vertical-align: top;
	}

	.left-item {
		padding: 29rpx 30rpx;
		font-size: 26rpx;
	}

	.right-item {
		padding: 29rpx 30rpx;
		font-size: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-box {
		padding-bottom: 100px;
	}

	.bg {
		background: rgba(0, 0, 0, 0.2);
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		z-index: 2;
		transition: 600ms;
	}
</style>
